<template>
  <view  class="container b-f">

    <view class="center" >
      <!-- 内容区 -->
      <view class="widget-body b-f dis-flex flex-dir-column flex-y-center">
        <!-- 用户信息 -->
        <view class="widget widget__base m-top20 b-f dis-flex flex-dir-column">
          <view class="base__capital dis-flex flex-dir-column">
            <view class="capital-card dis-flex">
              <view class="card-left">
                <view class="f-36">
                  <text class="m-r-10" space="ensp">我的积分  </text>
				  <text class="col-bb" style="color: #2196F3;"> {{ points.points ? points.points : 0 }}</text>
                  <!-- <text class="m-l-10">元</text> -->
                </view>
              </view>
			  <view class="card-right flex-box dis-flex flex-x-end flex-y-center u-flex-wrap">
			    <view class="log-btn f-36" @click="$navTo('pages/points/log')">
			  		明细
			    </view>
				<view class="withdraw-btn f-36" @click="$navTo('pages/points/apply')">
					提现
				</view>
			  </view>
              <!-- <view class="card-right flex-box dis-flex flex-x-end flex-y-center">
                <view class="withdraw-btn f-26" @click="$navTo('pages/dealer/withdraw/apply')">
					提现
                </view>
              </view> -->
            </view>
          </view>
        </view>
      </view>
    </view>
	<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" :bottombar="false" @up="upCallback">
	<!-- 商品列表 -->
	<view class="product-list">
	  <view class="product-card" v-for="(product, index) in productList.data" :key="index" >
	    <view class="product-image" @click="goToProductDetail(product)">
			<image class="image" :src="product.goods_image"></image>
	      <!-- <view class="product-placeholder">商品图片</view> -->
	    </view>
	    <view class="product-info" @click="goToProductDetail(product)">
	      <text class="product-name">{{ product.goods_name }}</text>
	      <view class="product-price-row">
			<text class="original-price" v-if="product.line_price_min > 0">{{ product.line_price_min }} 元</text>
	        <text class="current-price"> {{ product.goods_price_min }} 积分</text>
	      </view>
	    </view>
		<view class="product-btn">
		<view class="product-actions">
		  <view class="buy-now-btn"   @click="onShowSkuPopup(3, product.goods_id)">立即兑换</view>
		</view>
		</view>
	    <!-- <view class="loading-btn" v-if="product.loading">
	      <text class="loading-text">加载中</text>
	    </view> -->
		<!-- 商品SKU弹窗 -->
		<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
		
	  </view>
	</view>
	</mescroll-body>
  </view>
	
</template>

<script>
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import { getEmptyPaginateObj, getMoreListData, setCartTabBadge } from '@/core/app'
	import SkuPopup from '@/pages/goods/components/SkuPopup'
	import * as Api from '@/api/points'
	import * as GoodsApi from '@/api/goods'
	const pageSize = 15
	// 最后一次刷新时间
	let lastRefreshTime;
  export default {
	components: {
	    SkuPopup
	},
    data() {
      return {
		// 商品列表
		productList: getEmptyPaginateObj(),
		// 商品数据
		goods: {},
		// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
		skuMode: 1,
		// 显示/隐藏SKU弹窗
		showSkuPopup: false,
        // 正在加载
        isLoading: true,
		// 积分信息
		points: {},
		// 上拉加载配置
		upOption: {
		  // 首次自动执行
		  auto: true,
		  // 每页数据的数量; 默认10
		  page: { size: pageSize },
		  // 数量要大于3条才显示无更多数据
		  noMoreSize: 3,
		  // 返回顶部
		  toTop: { right: 30, bottom: 48, zIndex: 9 }
		}
      }
    },
	onLoad() {
		this.getGoodsList()
		this.getPoints()
	},
    /**
     * 生命周期函数--监听页面加载
     */
    onShow(options) {
    },

    methods: {
		getPoints(){
			const app = this
			app.isLogin = true
			return new Promise((resolve, reject) => {
				Api.info({}, { load: app.isFirstload })
			    .then(result => {
			      app.points = result.data.info
				  console.log(app.isLoading)
			      resolve(app.points)
			    })
			    .catch(err => {
			      if (err.result && err.result.status == 401) {
			        app.isLogin = false
			        resolve(null)
			      } else {
			        reject(err)
			      }
			    })
			})
		},
		/**
		 * 上拉加载的回调 (页面初始化时也会执行一次)
		 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
		 * @param {Object} page
		 */
		upCallback(page) {
		  const app = this
		  // 设置列表数据
		  app.getGoodsList(page.num)
		    .then(list => {
		      const curPageLen = list.data.length
		      const totalSize = list.data.total
		      app.mescroll.endBySize(curPageLen, totalSize)
		    })
		    .catch(() => app.mescroll.endErr())
		},
		/**
		 * 获取商品列表
		 * @param {Number} pageNo 页码
		 */
		getGoodsList(pageNo = 1) {
		  const app = this
		  const categoryId = 0
		  app.isLoading = true
		  return new Promise((resolve, reject) => {
		    GoodsApi.list({ categoryId, page: pageNo, goods_type: 30 }, { load: false })
		      .then(result => {
				app.isLoading = false
		        const newList = result.data.list
		        app.productList.data = getMoreListData(newList, app.productList, pageNo)
		        app.productList.last_page = newList.last_page
		        resolve(newList)
		      })
		      .catch(reject)
		  })
		},
		// 刷新列表数据
		onRefreshList() {
		  this.productList = getEmptyPaginateObj()
				console.log('获得的商品列表', this.productList)
				
		  setTimeout(() => this.mescroll.resetUpScroll(), 120)
		},
		/**
		 * 显示/隐藏SKU弹窗
		 * @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
		 */
		onShowSkuPopup(skuMode = 1, goodsId) {
		  this.getGoodsDetail((skuMode), goodsId);
		  // this.skuMode = skuMode
		  // this.showSkuPopup = !this.showSkuPopup
		},
		// 获取商品信息
		getGoodsDetail(skuMode = 1, goodsId) {
		  const app = this;
		  app.isLoading = true;
		  return new Promise((resolve, reject) => {
		    GoodsApi.detail(goodsId)
		      .then((result) => {
		        app.goods = result.data.detail;
		        app.skuMode = skuMode;
		        app.showSkuPopup = !app.showSkuPopup;
		        resolve(result);
		        app.isLoading = false;
		      })
		      .catch(() => {
		        app.isLoading = false;
		        reject();
		      });
		  });
		},
    }
  }
</script>

<style>
  page {
    background: #fff;
  }
</style>
<style lang="scss" scoped>
  .dealer-bg {
    .image {
      width: 100%;
    }
  }

  .widget-body {
    position: relative;

    .widget {
      width: 88%;
      box-sizing: border-box;
      box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
      border-radius: 12rpx;
    }
  }

  .widget__base {

    .base__user {
      position: relative;
      padding: 15rpx 40rpx;
      border-bottom: 1rpx solid #e7e7e7;

      .user-avatar {
        position: absolute;
        top: -75rpx;
        right: 60rpx;
      }

      .user-nickName {
        margin-top: 30rpx;
        margin-bottom: 10rpx;
      }
    }

    .base__capital {
      padding: 35rpx;

      .capital-card {
        height: 200rpx;
        padding: 36rpx 0;
        background-color: #fff;
        border-radius: 10rpx;
        box-sizing: border-box;

        .card-left {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          flex-direction: column;
          padding-left: 32rpx;
        }

        .card-right {
			.log-btn {
				  width: 145rpx;	
				  height: 60rpx;
				  background: #3ad402;
				  color: #fff;
				  border-radius: 10rpx;
				  margin-right: 32rpx;
				  display: flex;
				  justify-content: center;
				  align-items: center;
				  margin-bottom: 25rpx;
			}
			.withdraw-btn {
				width: 145rpx;
				height: 60rpx;
				background: #eac923;
				color: #fff;
				border-radius: 10rpx;
				margin-right: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
        }
      }

      .capital-already {
        padding: 20rpx;
        padding-bottom: 0;
      }
    }
  }

  /* 操作列表 */
  .widget__operat {
    padding: 50rpx;
    margin-top: 40rpx;

    .operat__item {
      width: 33.33333%;
      float: left;
      margin-bottom: 50rpx;
      text-align: center;

      &:last-child {
        margin-bottom: 0;
      }

      .item__icon {
        margin-bottom: 8rpx;
        font-size: 58rpx;
      }
    }
  }

  /* 当前不是分销商 */
  .no-dealer {
    padding-top: 150rpx;
  }

  .no-icon {
    image {
      width: 420rpx;
      height: 240rpx;
    }
  }

  .no-msg {
    padding: 86rpx 0;
  }

  .form-submit {
    .button {
      font-size: 30rpx;
      background: #786cff;
      border: 1rpx solid #786cff;
      color: white;
      border-radius: 50rpx;
      padding: 22rpx 0;
      width: 470rpx;
      box-sizing: border-box;
      margin: 0 auto;
      text-align: center;

      &.disabled {
        background: #8e84fc;
        border-color: #8e84fc;
        color: white;
      }
    }
  }
  .product-list {
    padding: 30rpx 32rpx 150rpx;
    
    .product-card {
      background: #FFFFFF;
      border-radius: 24rpx;
      margin-bottom: 24rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      position: relative;
      
      .product-image {
        width: 100%;
        height: 400rpx;
        background: #F0F0F0;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .product-placeholder {
          color: #999999;
          font-size: 28rpx;
        }
      }
      
      .product-info {
        padding: 32rpx 32rpx 0 32rpx;
        
        .product-name {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          margin-bottom: 16rpx;
          display: block;
        }
        
        .product-price-row {
          display: flex;
          align-items: center;
          margin-bottom: 24rpx;
          
          .original-price {
            font-size: 24rpx;
            color: #999999;
            text-decoration: line-through;
            margin-right: 16rpx;
          }
          
          .current-price {
            font-size: 32rpx;
            font-weight: bold;
            color: #FF4444;
          }
        }
        
      }
  	.product-btn {
  		
  		.product-actions {
  		  display: flex;
  		  gap: 16rpx;
  		  
  		  .add-cart-btn {
  		    flex: 1;
  		    height: 72rpx;
  		    background: #E3F2FD;
  		    color: #2196F3;
  		    border-radius: 12rpx;
  		    display: flex;
  		    align-items: center;
  		    justify-content: center;
  		    font-size: 28rpx;
  		    font-weight: 500;
  		  }
  		  
  		  .buy-now-btn {
  		    flex: 1;
  		    height: 72rpx;
  		    background: #FF4444;
  		    color: #FFFFFF;
  		    border-radius: 12rpx;
  		    display: flex;
  		    align-items: center;
  		    justify-content: center;
  		    font-size: 28rpx;
  		    font-weight: 500;
  		  }
  		}
  	}
      
      .loading-btn {
        position: absolute;
        bottom: 32rpx;
        right: 32rpx;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 50%;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .loading-text {
          font-size: 20rpx;
          color: #999999;
        }
      }
    }
  }
</style>
